<template>
	<view class="content">
		<canvas type="webgl" id="myCanvas" bindtouchstart="touchEvent" bindtouchmove="touchEvent"
			bindtouchend="touchEvent" bindtouchcancel="touchEvent"></canvas>
		<canvas type="2d" id="canvas2d"></canvas>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	
	onLoad(async (option) => {
	
	});

	onShow(async () => {
		console.log("onShow")
	});
	onMounted(() => {

	})
	const initPixi = () => {
		var query2d = wx.createSelectorQuery();
		var query = wx.createSelectorQuery();
		query2d.select('#canvas2d').fields({
			node: true,
			size: true
		}).exec((res2d) => {
			var canvas2d = res2d[0].node;
			query.select('#myCanvas').node().exec((res) => {
				var stageWidth = 750; //canvas宽度，跟小程序wxss指定的一样大小
				var stageHeight = 1220; //canvas高度，跟小程序wxss指定的一样大小
				var canvas = res[0].node;
				PIXI = createPIXI(canvas, stageWidth, canvas2d); //传入canvas，传入canvas宽度，用于计算触摸坐标比例适配触摸位置
				unsafeEval(PIXI); //适配PIXI里面使用的eval函数
				installSpine(PIXI); //注入Spine库
				var renderer = PIXI.autoDetectRenderer({
					width: stageWidth,
					height: stageHeight,
					'transparent': false,
					'view': canvas
				}); //通过view把小程序的canvas传入
				var stage = new PIXI.Container();
				var bg = PIXI.Sprite.from("img/bg.jpg");
				stage.addChild(bg);
				var bg = PIXI.Sprite.from("img/bg.jpg");
				stage.addChild(bg);
				bg.interactive = true;
				bg.on("touchstart", function(e) {
					console.log("touchstart", e.data.global)
				});
				bg.on("pointerup", function(e) {
					console.log("touchend")
				});
				//小程序不支持加载本地fnt，json文件，所以涉及到fnt，json文件的加载需要放到网络服务器
				PIXI.Loader.shared
					.add("https://raw.githubusercontent.com/skyfish-qc/imgres/master/blog.fnt")
					.add("https://raw.githubusercontent.com/skyfish-qc/imgres/master/mc.json")
					.add('spineboypro',
						"https://raw.githubusercontent.com/skyfish-qc/imgres/master/spineboy-pro.json")
					.load(function(loader, res) {
						var btext = new PIXI.BitmapText('score:1234', {
							'font': {
								'name': 'blog',
								'size': '60px'
							},
							'tint': 0xffff00
						});
						btext.x = 40;
						btext.y = 40;
						stage.addChild(btext);
						var explosionTextures = [];
						for (var i = 0; i < 26; i++) {
							var texture = PIXI.Texture.from('pic' + (i + 1) + '.png');
							explosionTextures.push(texture);
						}

						for (i = 0; i < 50; i++) {
							var explosion = new PIXI.AnimatedSprite(explosionTextures);

							explosion.x = Math.random() * stageWidth;
							explosion.y = Math.random() * stageHeight;
							explosion.anchor.set(0.5);
							explosion.rotation = Math.random() * Math.PI;
							explosion.scale.set(0.75 + Math.random() * 0.5);
							explosion.gotoAndPlay(Math.random() * 27);
							stage.addChild(explosion);
						}
						var spineBoyPro = new PIXI.spine.Spine(res.spineboypro.spineData);
						spineBoyPro.x = stageWidth / 2;
						spineBoyPro.y = 1200;

						spineBoyPro.scale.set(0.5);
						spineBoyPro.state.setAnimation(0, "hoverboard", true);
						stage.addChild(spineBoyPro);

						const graphics = new PIXI.Graphics();
						graphics.beginFill(0xFF3300);
						graphics.drawRect(50, 250, 100, 100);
						graphics.endFill();
						stage.addChild(graphics);
						renderer.render(stage);
					});

				function animate() {
					canvas.requestAnimationFrame(animate);
					renderer.render(stage);
				}
				animate();
			})
		})
	}

	const touchEvent = (e) => {
		//接收小程序的触摸事件传给PIXI
		PIXI.dispatchEvent(e);
	}
</script>

<style>
	#myCanvas {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 100%;
		z-index: 2;
	}

	#canvs2d {
		position: absolute;
		left: -10000px;
		top: -10000px;
		width: 16px;
		height: 16px;
	}
</style>